<template>
  <div class="app-container">
    <div v-show="blackList2">
      <el-form :label-width="labelWidth" :model="searchModel" :inline="true">
        <el-form-item label="车牌号:">
          <el-input style="width:2.2rem" v-model="searchModel.input" placeholder=""></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left:55px" type="primary" @click="getApiData">查询</el-button>
          <el-button style="margin-left:10px" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button @click="handleEdit">新增黑名单</el-button>
      <el-button @click="deleteBlack">移除黑名单</el-button>
      <el-table style="margin-top: 20px;" v-loading='listLoading' :data='list' element-loading-text='Loading' border fit
        highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column align='center' type="selection">
        </el-table-column>
        <el-table-column label='车牌号' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.plateNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label='黑名单来源' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.sourceType ? "" : "系统" }}</span>
          </template>
        </el-table-column>
        <el-table-column label='原因' align='center'>
          <template slot-scope='scope'>
            {{ scope.row.reason }}
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at1' label='有效期起'>
          <template slot-scope='scope'>
            <span>{{ scope.row.startTime }}</span>
          </template>
        </el-table-column>
        <el-table-column class-name='status-col' label='有效期止' align='center'>
          <template slot-scope='scope'>
            <span>{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at' label='创建人'>
          <template slot-scope='scope'>
            <span>{{ scope.row.creatorId }}</span>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at' label='创建时间'>
          <template slot-scope='scope'>
            <i class='el-icon-time' />
            <span>{{ scope.row.createUserName }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:15px;">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
          layout="prev, pager,next,sizes,jumper" :total="total">
        </el-pagination>
      </div>
      <el-dialog title="新增黑名单" :visible.sync="dialogFormVisible" width="35%">
        <insertBlackList ref="addBlackList" @backMain="backMain"></insertBlackList>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getApiBlacklistPageList } from "@/api/Blacklist";
import { deleteApiBlack } from "@/api/Blacklist";
import { inserApiBlack } from "@/api/Blacklist";
import insertBlackList from "./insertBlackList";
import { parseTime } from "@/utils"

export default {
  components: { insertBlackList },
  data() {
    return {
      blackList2: this.blackList1,
      dialogFormVisible2: this.dialogFormVisible1,
      input: "",
      listLoading: false,
      searchModel: {},
      inputModel: {},
      dialogModel: {
        plateNumber: "",
        validFrom: "",
        expiryDate: "",
        remake: "",
      },
      labelWidth: "100px",
      labelHeight: "32px",
      tableData: [],
      count: 0,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      value2: '',
      dialogFormVisible: false,
      multipleSelection: [],
      types: [
        {
          value: 0,
          label: '全部'
        }, {
          value: 1,
          label: '启用'
        }, {
          value: 2,
          label: '禁用'
        },],
      list: [],
      validFrom: "",
      expiryDate: "",
      carJurisdictionData: {},
      rules: {
        plateNumber: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
        validFrom: [{ required: true, message: '请选择有效期起', trigger: 'blur' }],
        expiryDate: [{ required: true, message: '请选择有效期止', trigger: 'blur' }],
        resource: [{ required: true, message: '请选择有效期止', trigger: 'blur' }],

      },
    }
  },
  created() {
    if (typeof this.blackList1 == 'undefined') {
      this.blackList2 = true;
    }
    if (typeof this.dialogFormVisible2 != 'undefined') {
      this.dialogFormVisible = this.dialogFormVisible2
      console.log(this.dialogFormVisible);
    }
    this.getApiData();
  },
  methods: {
    getApiData() {
      let data = {
        plateNumber: this.searchModel.input,
        skipCount: ((this.currentPage <= 1 ? 1 : this.currentPage) - 1) * this.pageSize,
        MaxResultCount: this.pageSize
      }
      getApiBlacklistPageList(data).then(res => {
        if (res == null) { return this.$vux.toast.text(res.message); }
        else {
          this.list = res.items;
          this.total = res.totalCount;
          console.log(res);
          this.list.forEach(element => {
            element.creationTime = parseTime(new Date(element.creationTime), '{y}-{m}-{d} {h}:{i}:{s}');
            element.startTime = parseTime(new Date(element.startTime), '{y}-{m}-{d} {h}:{i}:{s}');
            element.endTime = parseTime(new Date(element.endTime), '{y}-{m}-{d} {h}:{i}:{s}');
          });
        }
      });

    },

    changeTimeRadio(items) {
      if (items == "1周") {
        const end = new Date();
        const start = new Date();
        end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
        this.dialogModel.validFrom = start;
        this.dialogModel.expiryDate = end;
        this.validFrom = start;
        this.expiryDate = end;
        this.carJurisdictionData.timeValidityType = 2;
      }
      else if (items == "1月") {
        const end = new Date();
        const start = new Date();
        end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
        this.dialogModel.validFrom = start;
        this.dialogModel.expiryDate = end;
        this.validFrom = start;
        this.expiryDate = end;
        this.carJurisdictionData.timeValidityType = 3;
      }
      else if (items == "1年") {
        const end = new Date();
        const start = new Date();
        end.setTime(end.getTime() + 3600 * 1000 * 24 * 365);
        this.dialogModel.validFrom = start;
        this.dialogModel.expiryDate = end;
        this.validFrom = start;
        this.expiryDate = end;
        this.carJurisdictionData.timeValidityType = 4;
      }
      else if (items == "永久") {
        const end = new Date();
        const start = new Date();
        end.setTime(end.getTime() + 3600 * 1000 * 24 * 36500);
        this.dialogModel.validFrom = start;
        this.dialogModel.expiryDate = end;
        this.validFrom = start;
        this.expiryDate = end;

      } else {
        this.carJurisdictionData.timeValidityType = 99;
      }
    },
    backMain() {
      this.dialogFormVisible = false;
      this.getApiData();
    },
    changeStartTime(v) {
      if (this.validFrom.length == 0) {
        this.validFrom = v;
        this.dialogModel.resource = "自定义"
      }
      let startDate = new Date(this.validFrom)
      if (String(startDate).substring(0, 15) != String(v).substring(0, 15)) {
        this.dialogModel.resource = "自定义"
      }
    },
    changeEndTime(v) {
      if (this.expiryDate.length == 0) {
        this.expiryDate = v;
        this.dialogModel.resource = "自定义"
      }
      let endDate = new Date(this.expiryDate)
      if (String(endDate).substring(0, 15) != String(v).substring(0, 15)) {
        this.dialogModel.resource = "自定义"
      }
    },
    handleSizeChange(v) {
      this.pageSize = v;
      this.currentPage = 1;
      this.getApiData();
    },
    handleCurrentChange(v) {
      this.currentPage = v;
      this.getApiData();
    },
    resetSearch() {
      this.searchModel = [];
    },
    deleteBlack() {
      let data = [];
      for (let i of this.multipleSelection) {
        data.push(i.id);
      }
      if (data.length == 0) {
        return this.$message.error('请先勾选，再进行此操作');
      }
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteApiBlack(data).then(res => {
          this.getApiData();
        });
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //获取选择的行
    handleSelectionChange(val) {
      this.multipleSelection = val;

    },
    handleEdit() {
      this.dialogFormVisible = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  margin: 0.2rem;
  padding: 0.2rem;
}

#selectForm>>>.el-form-item__label {
  font-size: 12px;
}

.search-bar {
  margin-bottom: .2rem;
  text-align: left;
  margin-left: .6rem;
  margin-top: .4rem;
}

.form-span {
  font-size: 18px;
  ;
}

.block {
  margin-left: 20px;
  margin-right: .2rem;
  display: flex;
  justify-content: flex-end;
}

.move-right {
  margin-left: .5rem;
}
</style>
